<template>
    <div class="custom-input" 
        :class="[`custom-input--${getSize}`,getDisabled && `custom-input--disabled`]"
        >
        <input class="custom-input__input" :value="value" @input="$_handleChange" />

    </div>
</template>

<script>
export default {
    name:'custom-input',
    props:{
        value:{
            type:String
        },
        size:{
            type:String
        },
        disabled:{
            type:Boolean
        }
    },
    inject:['customForm'],
    mounted(){
        // console.log(this.customForm)
    },
    computed:{
        // 通过计算组件获取组件的size, 如果当前组件传入，则使用当前组件的，否则是否form组件的
        getSize(){
            return this.size || this.customForm.size
        },
        // 组件是否禁用
        getDisabled(){
            const { disabled } = this
            if( disabled !== undefined){
                return disabled
            }
            return this.customForm.disabled
        }
    },
    methods:{   
        $_handleChange(e){   
            this.$emit('input',e.target.value)
        }
    }

}
</script>

<style>

</style>